-
-
Notifications
You must be signed in to change notification settings - Fork 1k
Simplify VirtualDetector/InterceptingGestureDetector and reduce the number of renders
#3813
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
349e799 to
297e0cd
Compare
797299c to
86423e1
Compare
297e0cd to
19ea1a9
Compare
…#3814) ## Description Adds an early return inside `removeContextMenuListeners` so that it doesn't throw when `detach` and `dropHandler` are called consecutively. This is possible in v3 api, where the gesture lifecycle isn't tied to the detector component. ## Test plan Found when working on #3813, not sure how to reproduce it outside of it, but to reproduce it there use this: ``` import * as React from 'react'; import { Button, StyleSheet, Text, View } from 'react-native'; import { GestureDetector, InterceptingGestureDetector, useTap, } from 'react-native-gesture-handler'; export const COLORS = { NAVY: '#001A72', KINDA_RED: '#FFB2AD', YELLOW: '#FFF096', KINDA_GREEN: '#C4E7DB', KINDA_BLUE: '#A0D5EF', }; function TextWithTap() { const tap = useTap({ onStart: () => { 'worklet'; console.log('Tapped on text in its own component!'); }, }); return ( <GestureDetector gesture={tap}> <Text style={{ fontSize: 24, color: COLORS.KINDA_GREEN }}> This text is rendered in a separate component. </Text> </GestureDetector> ); } function NativeDetectorExample() { const [entireVisible, setEntireVisible] = React.useState(true); const [firstVisible, setFirstVisible] = React.useState(true); const [secondVisible, setSecondVisible] = React.useState(true); const [thirdVisible, setThirdVisible] = React.useState(true); const [secondKey, setSecondKey] = React.useState(0); const [firstHasCallback, setFirstHasCallback] = React.useState(true); const tapAll = useTap({ onStart: () => { 'worklet'; console.log('Tapped on text!'); }, }); const tapFirstPart = useTap({ onStart: firstHasCallback ? () => { 'worklet'; console.log('Tapped on first part!'); }: () => { 'worklet'; console.log('First part tapped, but no callback set.'); }, }); const tapSecondPart = useTap({ onStart: () => { 'worklet'; console.log('Tapped on second part!'); }, }); return ( <View style={styles.subcontainer}> <Button title={(firstVisible ? 'Hide' : 'Show') + ' entire text'} onPress={() => setEntireVisible(v => !v)} /> <Button title={(firstVisible ? 'Hide' : 'Show') + ' first part'} onPress={() => setFirstVisible(v => !v)} /> <Button title={(secondVisible ? 'Hide' : 'Show') + ' second part'} onPress={() => setSecondVisible(v => !v)} /> <Button title={(thirdVisible ? 'Hide' : 'Show') + ' third part'} onPress={() => setThirdVisible(v => !v)} /> <Button title="Re-mount second part" onPress={() => setSecondKey(k => k + 1)} /> <Button title={(firstHasCallback ? 'Disable' : 'Enable') + ' callback on first text'} onPress={() => setFirstHasCallback(v => !v)} /> {entireVisible && <InterceptingGestureDetector gesture={tapAll}> <Text style={{ fontSize: 18, textAlign: 'center' }}> Some text example running with RNGH {firstVisible && <GestureDetector gesture={tapFirstPart}> <Text style={{ fontSize: 24, color: COLORS.NAVY }}> {' '} try tapping on this part </Text> </GestureDetector>} {secondVisible && <GestureDetector gesture={tapSecondPart}> <Text key={secondKey} style={{ fontSize: 28, color: COLORS.KINDA_BLUE }}> {' '} or on this part </Text> </GestureDetector>} {thirdVisible && <> {' '} <TextWithTap /> </>} {' '} this part is not special :( </Text> </InterceptingGestureDetector>} </View> ); } export default function NativeTextExample() { return ( <View style={styles.container}> <NativeDetectorExample /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, subcontainer: { flex: 1, gap: 8, alignItems: 'center', justifyContent: 'center', }, header: { fontSize: 18, textAlign: 'center', paddingHorizontal: 24, }, }); ``` and press `Hide entire text`
...eact-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx
Outdated
Show resolved
Hide resolved
m-bert
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, though I'll leave approval for @akwasniewski as he is the author of VirtualDetector 😅
akwasniewski
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, you managed to solve most of my workarounds, congrats.
...eact-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx
Show resolved
Hide resolved
...eact-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx
Show resolved
Hide resolved
|
Found an infinite render loop 😞 |
|
The issue was switching between the Animated and non-animated intercepting detectors, which caused the tree to unmount, switch back to the other detector, and remount, triggering the whole process again. Should be gone with the new approach using |
Description
The communication logic between
VirtualDetector/InterceptingGestureDetectorwas complex, since it was passing callbacks through ref and everything else through state via context.Since we're relying on Reanimated's
useEventanduseComposedEventHandler, we need to trigger a rerender anyway to update the handler. This means there's no point in trying to optimize passing callbacks via refs, as we need to end with a render, and synchronizing renders and state updates requires additional logic.This PR simplifies the communication layer to pass everything through the state, which should greatly simplify logic.
It also:
shouldUseReanimated,dispatchesAnimatedEventsflags - now it checks every virtual gesture, where previously the last registered one was the deciding factorVirtualDetectorso that children changes can be detected - this should be changed to use MutationObserver once it's rolled out in RNInterceptingGestureDetectorTest plan
Tested on the following snippet: